<template>
  <div class="page-wrapper">
    <div class="header-wrapper">
      <h2 class="top">
        <van-icon class="back-icon" @click="fanhui" name="arrow-left" size="30px" />
        <span class="title-text">医生主页</span>
      </h2>
    </div>
    <div class="tuan-dui">
      <div class="tu-pian">
        <img :src="doctor.imageUrl" alt="文章图片" />
      </div>
      <!--    团队-->
      <div class="tuan-dui-text">
        <span class="tuan-dui-text-title">{{doctor.doctorName}}</span>&emsp;<span class="jigo">{{doctor.position}}</span><br>
        <span class="jigo">所属机构：{{medicalInstitution.institutionName}}</span><br>
        <span class="jigo">所属团队：{{doctorTeam.teamName}}</span><br>
        <span class="jigo">签约人数：<span style="color: blue">{{doctor.signUpCount}}</span></span>
      </div>
      <div class="anniu">
        <button class="but1"><van-icon name="user" /><br><br>发送消息</button>
        <button class="but2"  @click="showPopup"><van-icon name="phone" /><br></br>拨打电话</button>
        <button class="but3" @click="jinqu"><van-icon name="checked" /><br><br>申请服务</button>
      </div>
    </div>
    <h2 style="margin-left: 10px">医生简介</h2>
    <div class="yishengjianjie">
      {{doctor.introduction}}
    </div>
    <h2 style="margin-left: 10px">擅长</h2>
    <div class="shanchang">
      <span>{{doctor.expertise}}</span>
    </div>
    <!-- 将 van-popup 组件放在合适的位置，这里放在按钮下方 -->
    <van-popup
        v-model="show"
        closeable
        position="bottom"
        :style="{ height: '20%' }"
        @close="closePopup"
        class="centered-popup"
    >
      <!-- 这里可以添加弹窗的具体内容 -->
      <el-button type="danger" round style="margin-top: 30px;margin-left: 20%">服务热线：800-6888-8888</el-button>
    </van-popup>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      doctor: {},
      medicalInstitution: {},
      doctorTeam: {},
      doctorId: 0,
    };
  },
  methods: {
    findAll(){
      this.doctor = JSON.parse(localStorage.getItem('doctor'));
      this.medicalInstitution = JSON.parse(localStorage.getItem('medicalInstitution'));
      this.doctorTeam = JSON.parse(localStorage.getItem('doctorTeam'));
    },
    fetchDoctorInfo(doctorId) {
      console.log('正在请求医生信息，医生 ID:', doctorId);
      this.axios.get(`http://localhost:10086/api/doctor/doctor/findDoctorById/${doctorId}`)
          .then(res => {
            console.log('医生信息请求响应:', res);
            if (res.data.code === 200) {
              this.doctor = res.data.data.doctor;
              this.doctorTeam = res.data.data.doctorTeam;
              this.medicalInstitution = res.data.data.medicalInstitution;
              localStorage.setItem('doctor', JSON.stringify(res.data.data.doctor));
              localStorage.setItem('doctorTeam', JSON.stringify(res.data.data.doctorTeam));
              localStorage.setItem('medicalInstitution', JSON.stringify(res.data.data.medicalInstitution));
            } else {
              this.$message.error('获取医生信息失败');
            }
          })
          .catch(error => {
            console.error('请求出错:', error);
            this.$message.error('网络请求出错，请检查网络或服务器状态');
          });
    },
    fanhui() {
      this.$router.go(-1)
    },
    jinqu() {
      this.$router.push('/apply');
    },
    showPopup() {
      this.show = true;
    },
    closePopup() {
      this.show = false;
    }
  },
  created() {
    const token = JSON.parse(localStorage.getItem("token"));
    if (!token) {
      this.$message.error('请先登录');
      setTimeout(() => {
        this.$router.push({ name: 'login' });
      }, 1000);
    }
    // 设置全局默认请求头
    this.axios.defaults.headers.common['token'] = token;
     this.doctorId = this.$route.query.doctorId;
     this.doctorId = JSON.parse(localStorage.getItem('doctorId'));

      this.fetchDoctorInfo(this.doctorId);
      this.findAll();

  }
};
</script>

<style scoped>
.shanchang {
  width: 100%;
  height: auto;
  padding: 20px; /* 添加内边距 */
  box-sizing: border-box; /* 让内边距包含在盒子的宽度和高度内 */
}

.yishengjianjie {
  width: 100%;
  height: 150px;
  padding: 20px; /* 添加内边距 */
  box-sizing: border-box; /* 让内边距包含在盒子的宽度和高度内 */
}

.page-wrapper {
  min-height: 100vh;
  background-color: #F5F9FD;
}

.header-wrapper {
  background-color: white;
}

.top {
  display: flex;
  align-items: center;
  height: 50px;
  position: relative;
}

.back-icon {
  position: absolute;
  left: 10px;
}

.title-text {
  width: 100%;
  text-align: center;
}

.article-text p {
  font-size: 12px;
  color: gray;
}

.but1 {
  float: left;
  color: white;
  width: 110px;
  height: 110px;
  margin:20px 15px  0px 15px;
  border-radius: 15px;
  background-color: #2984F8;
  border: none;
}

.but2 {
  float: left;
  color: white;
  width: 110px;
  height: 110px;
  margin:20px 15px  0px 15px;
  border-radius: 15px;
  background-color: #FDDB78;
  border: none;
}

.but3 {
  float: left;
  color: white;
  width: 110px;
  height: 110px;
  margin:20px 15px  0px 15px;
  border-radius: 15px;
  background-color: #28D094;
  border: none;
}

.anniu {
  width: 100%;
  height: 80px;
  float: left;
}

.ping-fen {
  margin-left: 10px;
  color: #FFCD1A;
  font-size: 18px;
}

.jigo {
  color: dimgrey;
}

.tuan-dui-text {
  width: 200px;
  height: 100px;
  float: left;
  margin-left: 10px;
  margin-top: 40px;
}

.tuan-dui-text-title {
  font-size: 20px;
  color: black;
}

.tu-pian {
  width: 150px;
  height: 150px;
  float: left;
  margin-left: 10px;
  margin-top: 10px;
}

.tu-pian img {
  width: 120px;
  height: 120px;
  float: left;
  margin-left: 10px;
  margin-top: 15px;
  border-radius: 30px;
  box-shadow: 0 0 10px rgba(0, 128, 255, 0.2);
}

.tuan-dui {
  width: 100%;
  height: 320px;
  background-color: #ffffff;
}

.page-wrapper {
  min-height: 100vh;
  background-color: #F5F9FD;
}

.header-wrapper {
  background-color: white;
}

.top {
  display: flex;
  align-items: center;
  height: 50px;
  position: relative;
}

.back-icon {
  position: absolute;
  left: 10px;
}

.title-text {
  width: 100%;
  text-align: center;
}

img {
  /*background-color: red;*/
  width: 100%;
  height: 100%;
}
</style>